<template>
  <div id="body">
      <el-card id="left">
      <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false"  >
        <el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>
      </el-upload>
        <el-divider></el-divider>
        <el-button size="small" type="success" @click="gotoIdent">识别</el-button>
      </el-card>
      <el-card id="right">
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="score"
            label="得分"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="名字">
          </el-table-column>
        </el-table>
      </el-card>
  </div>
</template>

<script>
import * as ident from '../../api/identify'
export default {
  data() {
    return {
      real: {
        base64: ''
      },
      tableData: []
    }
  },
  methods: {
    getFile(file, fileList) {
      this.getBase64(file.raw)
    },
    gotoIdent() {
      const that = this
      ident.getImagePlant(this.real).then(function (response) {
        if (response.data.code === 1004) {
          that.notify.error('图片识别出错')
        } else if (response.data.code === 1004) {
          that.notify.error('图片无法识别')
        } else {
          that.tableData = response.data.data
        }
      })
    },
    getBase64(file) {
      const reader = new FileReader()
      const that = this
      reader.readAsDataURL(file)
      reader.onload = function () {
        that.real.base64 = reader.result
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
    }
  }
}
</script>

<style scoped>
#body{
  display: flex;
  width: 100%;
  height: 100%;
}
#left{
  width: 40%;
  height: 70vh;
}
#right{
  width: 60%;
  height: 70vh;
}
</style>
